<template>
    <div class="all">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="background-color: #409EFF;">
                <el-menu-item index="1" @click="drill()">钻孔状态监控 </el-menu-item>
                <el-menu-item index="2" @click="index()">钻机实时状态图</el-menu-item>
                <el-menu-item index="3" >看板</el-menu-item>
            </el-menu>
      <div style="font: 25px bold">水平沉铜生产线</div>
      <div style="display: flex" class="gdxx">
        <el-descriptions title="当前工单信息" :column="1" border>
          <el-descriptions-item
            label="工单号"
            label-class-name="my-label"
            content-class-name="my-content"
            >XF240531031-2-0-1</el-descriptions-item
          >
          <el-descriptions-item label="计划生产数">
            <el-tag size="small">20</el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            label="客户"
            label-class-name="my-label"
            content-class-name="my-content"
            >2769</el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions title="耗能管理" :column="1" border>
          <el-descriptions-item
            label="上岗人员"
            label-class-name="my-label"
            content-class-name="my-content"
            width="200"
            >宋慧金</el-descriptions-item
          >
          <el-descriptions-item label="昨日用电(KWh)">
            <el-tag size="small">9970.391</el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            label="昨日用水(m*3)"
            label-class-name="my-label"
            content-class-name="my-content"
            >17.23</el-descriptions-item
          >
        </el-descriptions>
        <div ref="chart" style="width: 400px; height: 250px; color: #ffffff !important;"></div>
        <div>
          <div>设备故障</div>
          <div style="display: flex">
            <el-result icon="error" title="重大异常" subTitle="0 项"> </el-result>
  
            <el-result
              icon="warning"
              title="关键异常"
              subTitle="0 项"
            ></el-result>
  
            <el-result icon="info" title="一般异常" subTitle="0 项"> </el-result>
          </div>
        </div>
      </div>
      <div style="display: flex">
        <div style="display: flex">
          <div class="a">
            <div  class="dlgd">
              <div>队列工单</div>
              <div class="scroll_table">
                <div style="display: inline-block; width: 100%">
              <el-table :data="tableList" class="table">
                <el-table-column v-for="(item,index) in columns"
                :key="index+'i'" :label="item.label" :prop="item.prop" :width="item.width">
                </el-table-column>
                </el-table>
                 <vue-seamless-scroll
                       :data="tableList"
                       class="seamless-warp"
                       style="width: 100%"
                       :class-option="classOption">
                 <el-table :data="tableList" class="table_scroll">
                 <el-table-column
                   v-for="(item,index) in columns"
                   :key="index+'i'"
                   :label="item.label"
                   :prop="item.prop" :width="item.width"/>
                </el-table>
                </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div style="padding: 10px;">
              <div>设备状态</div>
              <div class="scroll_table">
                <div style="display: inline-block; width: 100%">
              <el-table :data="tableList" class="table">
                <el-table-column v-for="(item,index) in colum"
                :key="index+'i'" :label="item.label" :prop="item.prop">
                </el-table-column>
                </el-table>
                 <vue-seamless-scroll
                       :data="tableList"
                       class="seamless-warp"
                       style="width: 100%"
                       :class-option="classOption">
                 <el-table :data="tableList" class="table_scroll">
                 <el-table-column
                   v-for="(item,index) in colum"
                   :key="index+'i'"
                   :label="item.label"
                   :prop="item.prop"/>
                </el-table>
                </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
          <div class="b">
            <div  class="ysjc">
              <div>药水检验</div>
              <div class="scroll_table">
                <div style="display: inline-block; width: 100%">
              <el-table :data="table" class="table">
                <el-table-column v-for="(item,index) in column"
                :key="index+'i'" :label="item.label" :prop="item.prop" :width="item.width">
                </el-table-column>
                </el-table>
                 <vue-seamless-scroll
                       :data="table"
                       class="seamless-warp"
                       style="width: 100%"
                       :class-option="classOption">
                 <el-table :data="table" class="table_scroll">
                 <el-table-column
                   v-for="(item,index) in column"
                   :key="index+'i'"
                   :label="item.label"
                   :prop="item.prop"
                   :width="item.width"/>
                </el-table>
                </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div style="padding: 10px;">
              <div>设备保养</div>
              <div class="scroll_table">
                <div style="display: inline-block; width: 100%">
              <el-table :data="table" class="table">
                <el-table-column v-for="(item,index) in column"
                :key="index+'i'" :label="item.label" :prop="item.prop" :width="item.width">
                </el-table-column>
                </el-table>
                 <vue-seamless-scroll
                       :data="table"
                       class="seamless-warp"
                       style="width: 100%"
                       :class-option="classOption">
                 <el-table :data="table" class="table_scroll">
                 <el-table-column
                   v-for="(item,index) in column"
                   :key="index+'i'"
                   :label="item.label"
                   :prop="item.prop"
                   :width="item.width"/>
                </el-table>
                </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="padding: 10px; width: 760px;">
          <div>参考数据</div>
          <div>
            <div class="scroll_table">
                <div style="display: inline-block; width: 100%; height:100%">
              <el-table :data="Data" class="table">
                <el-table-column v-for="(item,index) in colu"
                :key="index+'i'" :label="item.label" :prop="item.prop" :width="item.width">
                </el-table-column>
                </el-table>
                 <vue-seamless-scroll
                       :data="Data"
                       class="seamless-warp"
                       style="width: 100%"
                       :class-option="classOption">
                 <el-table :data="Data" class="table_scroll">
                 <el-table-column
                   v-for="(item,index) in colu"
                   :key="index+'i'"
                   :label="item.label"
                   :prop="item.prop"
                   :width="item.width"/>
                </el-table>
                </vue-seamless-scroll>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import Vue from "vue";
  import * as echarts from "echarts";
  
  export default {
    name: "VisualReport",
    data() {
      return {
        chartInstance: null,
        columns:[
          { prop: 'name', label: '工单编码', width:'80', sort: true },
          { prop: 'date', label: '物料编码', width:'100', sort: true },
        ],
        colum:[
          { prop: 'name', label: '设备名称',  sort: true },
          { prop: 'date', label: '设备状态',  sort: true },
        ],
        column:[
          { prop: 'ys', label: '药水检验项',width:'100' },
          { prop: 'jybz', label: '检验标准',width:"100" },
          { prop: 'jyz', label: '检验值',width:'100'},
          { prop: 'time', label: '检验时间',width:'120' },
        ],
        colu:[
          { prop: 'name', label: '设备名称', width: '100'},
          { prop: 'type', label: '参数名称',  width: '100'},
          { prop: 'hp', label: '参数值', width: '100'},
          { prop: 'hph', label: '参数值', width: '110'},
          { prop: 'bzz', label: '标准值', width: '200'},
          { prop: 'cjcs', label: '采集参数', width: '120'},
          
        ],
        Data: [
          {id:'1',type: "酸碱度",name: "王小虎",hp:'4-12',hph:'2569',bzz:'569',cjcs:'6789'},
          {id:'2',type: "酸碱度",name: "王小虎",hp:'4-12',hph:'2569',bzz:'569',cjcs:'6789'},
          {id:'3',type: "酸碱度",name: "王小虎",hp:'4-12',hph:'2569',bzz:'569',cjcs:'6789'},
          {id:'4',type: "酸碱度",name: "王小虎",hp:'4-12',hph:'2569',bzz:'569',cjcs:'6789'},
          {id:'5',type: "酸碱度",name: "王小虎",hp:'4-12',hph:'2569',bzz:'569',cjcs:'6789'},
          {id:'6',type: "酸碱度",name: "王小虎",hp:'4-12',hph:'2569',bzz:'569',cjcs:'6789'},
          {id:'7',type: "酸碱度",name: "王小虎",hp:'4-12',hph:'2569',bzz:'569',cjcs:'6789'},
          {id:'8',type: "酸碱度",name: "王小虎",hp:'4-12',hph:'2569',bzz:'569',cjcs:'6789'},
        ],
        tableList: [
          {id: '1',date: '2010', name: '张三',},
          {id: '2',date: '2011',name: '李四',},
          {id: '3',date: '2021',name: '王五',},
          {id: '4',date: '2022',name: '赵六',}
        ],
        table: [
          {id: '1',ys: 'kclcc',jybz: 'ph',jyz: '7.4',time: '2022',},
          {id: '2',ys: 'kclww',jybz: 'ph',jyz: '7.4',time: '2022',},
          {id: '3',ys: 'kclaa',jybz: 'ph',jyz: '7.4',time: '2022',},
          {id: '4',ys: 'kclsd',jybz: 'ph',jyz: '7.4',time: '2021',}
        ],
        tableData: [
          {id:'1',date: "2017-05",name: "王小虎"},
          {id:'2',date: "2017-05",name: "王小虎"},
          {id:'3',date: "2018-05",name: "王小虎"},
          {id:'4',date: "2019-05",name: "王小虎"},
          {id:'5',date: "2020-05",name: "王小虎"},
          {id:'6',date: "2021-05",name: "王小虎"},
          {id:'7',date: "2022-05",name: "王小虎"},
          {id:'8',date: "2023-05",name: "王小虎"},
        ],
      };
    },
    computed: {
      classOption () {
        return {
          step: 0.8, // 数值越大速度滚动越快
          limitMoveNum: this.table.length+1, // 开始无缝滚动的数据量 this.tableList
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
    mounted() {
      this.chartInstance = echarts.init(this.$refs.chart);
      this.createChart();
    },
    methods: {
      createChart() {
        const option = {
          title: {
            text: "产能趋势(七天)",
          },
          tooltip: {},
          xAxis: {
            data: ["7/4", "7/4", "7/4", "7/4", "7/4", "7/4"],
          },
          yAxis: {},
          series: [
            {
              name: "A",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
            {
              name: "B",
              type: "bar",
              data: [7, 23, 35, 10, 10, 23],
            },
          ],
        };
  
        this.chartInstance.setOption(option);
      },
      index() {
            this.$router.push({ path: '/home' })
        },
    drill() {
            this.$router.push({ path: '/' })
        },
    },
    beforeDestroy() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
      }
    },
    
  };
  </script>
  <style lang="less" scoped>
  .all{
    color: #ffffff !important;
    background-color: #409EFF;
    .gdxx{
      /deep/.el-descriptions {
    color: #ffffff !important;
    padding: 10px;
    .is-bordered .el-descriptions-item__cell{
    color: #ffffff !important;
    background-color: #409EFF;
    border: 1px solid #7176d5;
  }
  }
    }
    .a{
      padding: 10px;
      .dlgd{
      .scroll_table {
    margin: 15px;
    display: flex;
    /deep/ .table .el-table__body-wrapper {
      display: none;
    }
    .seamless-warp {
      height: 200px;
      overflow: hidden;
      /deep/ .table_scroll .el-table__header-wrapper {
        display: none;
      }
    }
  }
    }
    }
    
    .b{
      padding: 10px;
      .ysjc{
        width: 450px;
      .scroll_table {
    margin: 15px;
    display: flex;
    /deep/ .table .el-table__body-wrapper {
      display: none;
    }
    .seamless-warp {
      height: 200px;
      overflow: hidden;
      /deep/ .table_scroll .el-table__header-wrapper {
        display: none;
      }
    }
  }
    }
    }
  }
   
  /deep/.el-table th.el-table__cell {
    color: #ffffff !important;
      background-color: #409EFF;
    }
  /deep/.el-table .el-table__cell{
    color: #ffffff !important;
      background-color: #409EFF;
      border: 1px solid #7176d5;
    }
  /deep/.el-table th.el-table__cell.is-leaf {
    color: #ffffff !important;
      border-bottom: 1px solid #7176d5;
  }
  
  .scroll_table {
    margin: 15px;
    display: flex;
    /deep/ .table .el-table__body-wrapper {
      display: none;
    }
    .seamless-warp {
      height: 520px;
      overflow: hidden;
      /deep/ .table_scroll .el-table__header-wrapper {
        display: none;
      }
    }
  }
  /deep/.el-table__body tr:hover > td{
      background-color:rgb(39, 194, 52) !important;
  }
  </style>
  